<template>
  <div class="header-wrap">
      <div class="header">
          <div class="header-top-wrap" ref="headerTop" >
              <div class="header-top">
                  <div class="header-top-logo">
                      <img src="../../assets/image/header/logo.png" alt="">
                  </div>
                  <div class="header-top-phone">
                      <div class="header-top-phone-tit">
                          <img src="../../assets/image/header/phone.png" alt="">
                          <span>在线客服电话</span>
                      </div>
                      <div class="header-top-phone-con">18210333691</div>
                  </div>
              </div>
          </div>
          <div class="header-nav-wrap" :class="{'is_fixed' : isFixed}">
              <div class="header-nav">
                <ul >
                   <li v-for="(item) in indexData" :key="item.path" @click="go(item.path)" :class="{'active-navs':activeIndex==item.path }" >{{item.name}}</li>
                </ul>
              </div>
              
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            isFixed:false,
           
            indexData:[
                {
                    path:"home",
                    name:"首页"
                },
                 {
                    path:"about",
                    name:"大华简介"
                },
                 {
                    path:"h5",
                    name:"培训课程"
                },
                 {
                    path:"teachers",
                    name:"师资力量"
                },
                 {
                    path:"cooperation",
                    name:"合作企业"
                },
                 {
                    path:"school",
                    name:"校园风采"
                },
                 {
                    path:"works",
                    name:"学员作品"
                },
                 {
                    path:"job",
                    name:"大华招聘"
                }

            ],
            activeIndex:"home"   
        }
    },
    methods:{
       go(name){
           this.$router.push({
               name:name
           })
        this.activeIndex=name
       },
        handleScroll () {
     let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量

     this.isFixed = scrollTop >=102 ? true : false; 
      
    }     
    },
    mounted(){
        console.log(this.$route.name)
       this.activeIndex= this.$route.name 
       window.addEventListener('scroll',this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
    },
    


}
</script>

<style scoped lang="scss">
ul,li{
    list-style: none;
}
*{
    margin: 0;
    padding: 0;
}
.header-wrap{
    width: 100%;
    height: 160px;
    .header{
        height: 100%;
        background-color: #fff;
        .header-top-wrap{
            width: 100%;
            height: 102px;
            min-width: 1200px;
            .header-top{
                margin: 0 auto;
                width: 1200px;
                height: 102px;
                display: flex;
                box-sizing: border-box;
                padding: 0 20px;
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: center;
                margin: 0 auto;
                .header-top-logo{
                        margin: 0;
                        padding: 0;
                        border: 0;
                        font-size: 100%;
                        font: inherit;
                        vertical-align: baseline;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}
.header-nav-wrap{
        background-color: #1f8ceb;
        height: 58px;
        min-width: 1200px;
        border-bottom: 1px solid #3ea5fe;
        box-sizing: border-box;
        width: 100%;
        
        .header-nav{
            width: 1200px;
            margin: 0 auto;
            ul{
                    display: flex;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                    li{
                            color: #fff;
                            font-size: 20px;
                            box-sizing: border-box;
                            line-height: 57px;
                            flex: 1;
                            text-align: center;
                            border: 1px solid #1f8ceb;
                            border-top: none;
                            border-bottom: none;
                            position: relative;
                            cursor: pointer;
                    }
            }
        }
}
.header-top-phone{
    display: flex;
    height: 46px;
    align-items: flex-end;
}
.header-top-phone-tit{
    color: #999;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: flex-end;

}
.header-top-phone-con{
    color: #39f;
    font-size: 30px;
    font-weight: 700;
    line-height: 24px;
}
.active-navs{
    border: 1px solid #3ea5fe;
    border-top: none;
    border-bottom: none;
    background-color: #06c;
    box-sizing: border-box;
}
.is_fixed{
    position: fixed;
    top:0;
    z-index:999;
}
</style>